<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      :before-close="close"
      :title="title"
      width="800px"
      :top="'10vh'"
    >
      <div class="body">
        <component :is="templateName" v-if="templateName" :data="columns" @fetch-data="callBack" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PortalNewSettingManagerIndex',
  data() {
    return {
      dialogFormVisible: false,
      title: '模版设置',
      columns: {},
      mb: null,
      dl: null,
      fl: null,
      templateName: null
    }
  },
  watch: {
    columns: {
      handler(newName, oldName) { // 值发生变化时
        if (undefined !== newName &&
          undefined !== newName.mbdl &&
          undefined !== newName.mbfl &&
          undefined !== newName.mb
        ) {
          this.mb = newName.mb
          this.dl = newName.mbdl
          this.fl = newName.mbfl
          const path = './' + this.dl + '/' + this.fl + '/' + this.mb
          const res = () => import(`${path}`)
          this.templateName = res
        } else {
          this.templateName = null
        }
      },
      immediate: false, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    init(data) {
      this.columns = Object.assign({}, data)
      this.dialogFormVisible = true
    },
    callBack() {
      this.close()
    },
    close() {
      this.dialogFormVisible = false
      this.$emit('fetch-data')
    }
  }
}
</script>

<style scoped>
.body {
  width: 100%;
  min-height: 500px;
}
</style>
